<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运动检测 - Web 视觉检测系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>

<body>
    <div class="container">
        <header>
            <h1>🏃 运动检测</h1>
            <p>实时检测画面中的移动物体</p>
        </header>

        <div class="detection-container">
            <div class="detection-header">
                <h2>实时检测</h2>
                <a href="/" class="btn btn-secondary">← 返回主页</a>
            </div>

            <div class="info-box">
                <p><strong>功能说明：</strong></p>
                <p>• 基于帧差法检测画面中的运动</p>
                <p>• 左侧显示原始图像，右侧显示边缘检测结果</p>
                <p>• 检测到运动时会显示红色警告提示</p>
                <p>• 使用均方误差（MSE）算法判断运动</p>
            </div>

            <div class="video-container">
                <img src="{{ url_for('video_feed', detection_type='motion_detection') }}" alt="视频流" class="video-stream"
                    onerror="this.src=''; this.alt='❌ 无法加载视频流';">
                <div class="video-loading">
                    <div class="spinner"></div>
                    <p>正在加载视频流...</p>
                </div>
            </div>

            <div class="controls">
                <h3>技术信息</h3>
                <p>🔍 <strong>检测算法：</strong>帧差法 + 均方误差（MSE）</p>
                <p>📊 <strong>阈值设定：</strong>MSE > 100 触发运动检测</p>
                <p>🎨 <strong>边缘检测：</strong>Canny 算法（阈值 100-200）</p>
                <p>🔧 <strong>预处理：</strong>高斯模糊去噪（3x3 核）</p>
                <p>💡 <strong>应用场景：</strong>安防监控、自动报警系统</p>
            </div>
        </div>

        <footer>
            <p>Web 视觉检测系统 | 运动检测模块</p>
        </footer>
    </div>

    <script>
        document.querySelector('.video-stream').onload = function () {
            const loading = document.querySelector('.video-loading');
            if (loading) {
                loading.style.display = 'none';
            }
        };
    </script>
</body>

</html>